<template>
  <div class="add-user">
    <el-form
      :inline="true"
      :rules="rules"
      ref="ruleForm"
      :model="dataForm"
      label-width="120px"
      class="dialog"
      :label-position="labelPosition"
    >
      <el-row :gutter="20">
        <el-col :span="12" style="position:relative">
          <el-form-item label="名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="请输入名称" clearable ></el-input>
          </el-form-item>
          <p
            style="color:#F56C6C;margin-left:130px;margin-bottom:20px;font-size:12px;position:absolute;left:0;top:45px;"
            v-if="validteGroupNo"
          >该名称已存在,请重新输入</p>
        </el-col>
        <el-col :span="12">
          <el-form-item label="父级权限" prop="parentCode">
             <el-select v-model="dataForm.parentCode" placeholder="请选择父级权限" clearable>
              <el-option
                v-for="item in parentCodeList"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="权限级别" prop="level">
            <el-input v-model.number="dataForm.level" placeholder="请输入权限级别" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="前台路由地址" prop="url">
            <el-input v-model="dataForm.url" placeholder="请输入前台路由地址" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="后台链接地址" prop="conponent">
            <el-input v-model="dataForm.conponent" placeholder="请输入后台链接地址" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮权限" prop="button">
            <el-radio-group v-model="dataForm.button" style="margin-top:12px">
              <el-radio :label="false">否</el-radio>
              <el-radio :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="图标地址" prop="icon">
            <el-input v-model="dataForm.icon" placeholder="请输入图标地址" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="鉴权用名称" prop="tright">
            <el-input v-model="dataForm.tright" placeholder="请输入鉴权用名称" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
           <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="顺序号" prop="orderDesc">
            <el-input v-model="dataForm.orderDesc" placeholder="请输入顺序号" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="23">
          <el-form-item prop="remark" label="备注">
          <el-input type="textarea" :rows="5" placeholder="请输入备注" v-model="dataForm.remark" clearable></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin-top:20px;margin-bottom:100px;text-align:center;">
        
        <el-button type="primary"  @click="doneFinshed('ruleForm')" :disabled="isDabled">确认</el-button>
        <el-button type="info" @click="backPrev">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    var orderDesc = (rule, value, callback) => {
      console.log(value)
      var regex = /^\d{1,11}$/
      if (value == '') {
        callback(new Error('顺序号不允许为空'))
      } else
      if (!regex.test(value)) {
        callback(new Error('顺序号只能是数字并且长度不能大于 11'))
      } else {
        callback()
      }
    }
    var level = (rule, value, callback) => {
      console.log(value)
      var regex = /^\d{1,11}$/
      if (value == '') {
        callback(new Error('权限级别不允许为空'))
      } else
      if (!regex.test(value)) {
        callback(new Error('权限级别只能是数字并且长度不能大于 11'))
      } else {
        callback()
      }
    }
    var names = (rule, value, callback) => {
      var data = {
        name: this.dataForm.name
      }
      if (value == '') {
        callback(new Error('名称不允许为空'))
      } else if (value && !this.noRepeat) {
        this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/permission/checkOnly`, data).then((res) => {
          if (res.result) {
            this.noRepeat = res.data
            if (this.noRepeat == false) { // res.data.data [true]有重复/【false】无重复
              callback(new Error('该名称已存在,请重新输入'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    }
    return {

      parentCodeList: [],
      value: '',
      disabled: false,
      validteGroupNo: false,
      dataForm: {
        remark: '',
        name: '',
        parentCode: '',
        level: '',
        url: '',
        button: false,
        conponent: '',
        icon: '',
        tright: '',
        orderDesc: ''
      },
      noRepeat: false,
      sysCode: ['sys_role'],
      companList: [],
      roledisabled: true,
      componydisabled: true,
      labelPosition: 'right',
      rules: {
        name: [
          { validator: names, required: true, trigger: 'blur' },
          {min: 1, max: 64, message: '长度不可超过64个字符', trigger: 'blur'}
        ],
        level: [
          { required: true, validator: level }
        ],
        button: [
          { required: true, message: '请选择按钮权限', trigger: 'change' }
        ],
        tright: [
          { required: true, message: '鉴权用名称不允许为空', trigger: 'blur' },
           {min: 1, max: 64, message: '长度不可超过64个字符', trigger: 'blur'}
        ],
        orderDesc: [
            { validator: orderDesc, required: true, trigger: 'blur' }

        ],
        conponent: [
              {min: 1, max: 128, message: '长度不可超过128个字符', trigger: 'blur'}
        ],
        url: [
           {min: 1, max: 128, message: '长度不可超过128个字符', trigger: 'blur'}
        ],
        icon: [
          {min: 1, max: 128, message: '长度不可超过128个字符', trigger: 'blur'}
        ],
        remark: [
           { min: 2, max: 255, message: '长度不可超过255个字符', trigger: 'blur' }
        ]
      },
      isDabled: false
    }
  },
  mounted () {
    this.queryParentCode()
  },

  methods: {
    // backPrev () {
    //   this.$confirm('此操作将放弃当前修改, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       this.$router.go(-1)
    //     })
    //     .catch(() => {})
    // },
    // 检测权限唯一性
    checkOnly (index) {
      console.log('是否进入')
      if (this.dataForm.name == '') {
        return
      }
      var data = {}
      if (index == 1) {
        data = {
          name: this.dataForm.name
        }
      } else {
        data = {
          name: this.dataForm.name
        }
      }
      this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/permission/checkOnly`, data)
        .then(res => {
          if (res.result) {
            if (res.data) {
              if (index == 1) {
                this.validteGroupNo = false
              } else {
                this.validateName = false
              }
            } else {
              if (index == 1) {
                this.validteGroupNo = true
              } else {
                this.validateName = true
              }
            }
          }
        })
    },
    backPrev () {
      this.$router.go(-1)
    },
    queryParentCode () {
      this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/permission/findPermissionList`, {}).then((res) => {
        if (res.result) {
          var data = res.data
          var delData = []
          for (var k in data) {
            delData.push({label: data[k].name, value: data[k].code})
          }
          this.parentCodeList = delData
        }
      })
    },
    doneFinshed (formName) {
      var data = {
        operateType: 'save',
        permission: {
          name: this.dataForm.name,
          parentCode: this.dataForm.parentCode,
          level: this.dataForm.level,
          url: this.dataForm.url,
          conponent: this.dataForm.conponent,
          button: this.dataForm.button,
          icon: this.dataForm.icon,
          tright: this.dataForm.tright,
          remark: this.dataForm.remark,
          orderDesc: this.dataForm.orderDesc
        }
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isDabled = true
          this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/permission/operationData`, data).then((res) => {
            if (res.result) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })

              this.$router.push(
                  '/systemSettings/jurisdiction/jurisdictionList'
                )
            } else {
              this.isDabled = false
              this.$message.error({
                message: res.msg,
                duration: 5000
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style>
.dialog .el-form-item__content {
  width: 70%;
}
.url .el-form-item__content {
  width: 80%;
}
.dialog .el-form-item {
  width: 100%;
}
.dialog .el-select {
  width: 100%;
}
.el-form-item__label {
  text-align: right;
}
</style>

<style lang="scss" scoped>
.add-user {
  background: #fff;
  padding-top: 20px;
  padding-left: 20px;
}
</style>

